<template>
<div class="userData">
  <div class="user-box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人中心</span>
      </div>
      <el-tabs tab-position="left">
        <el-tab-pane label="个人信息">
          <el-button style="float: right; padding: 3px 0" type="text" @click="discUser">修改资料</el-button>
           <div class="user-color">
            <el-divider content-position="left">用户昵称</el-divider>
            <span>{{userData.nickName}}</span>
            <!-- <el-divider content-position="left">用户头像</el-divider>
            <el-image
                style="width: 100px"
                  :src="userData.headImg ? userData.headImg : 'https://mall-bucket-2.oss-cn-beijing.aliyuncs.com/72d1e6ee17204eabb4bcfebc2f269c4c.jpg'"></el-image>
            <p v-if="!userData.headImg">(目前头像为默认头像喔~)</p> -->
            <el-divider content-position="left">用户密码</el-divider>
            <span>{{userData.password}}</span>
            <el-divider content-position="left">用户手机号</el-divider>
            <span>{{userData.account}}</span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的订单">
          <order-list></order-list>
        </el-tab-pane>
        <el-tab-pane label="我的收藏">
          <div class="collect-box">
            <div v-if="collectList.length>0">
              <div  v-for="item in collectList" :key="item.id">
                <el-image
                style="width: 300px"
                  :src="item.imgUrl"></el-image>
                <el-button type="warning" @click="deleteCollect(item.id)">取消收藏</el-button>
              </div>
               
            </div>
           <div v-else>
             暂无收藏图片
           </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分类删除">
          <el-collapse v-model="manager" accordion>
            <el-collapse-item title="商品分类" name="1">
              <div class="manager-box" v-for="item in goodType" :key="item.id">
                <div class="box1">
                  <h4>{{item.typeName}}</h4>
                  <el-button type="warning" @click="deleteGood(item, 1)">删除</el-button>
                </div>
                <el-divider></el-divider>
              </div>
            </el-collapse-item>
            <el-collapse-item title="帖子分类" name="2">
              <div class="manager-box" v-for="item in tzType" :key="item.id">
                <div class="box1">
                  <h4>{{item.typeName}}</h4>
                  <el-button type="warning" @click="deleteGood(item, 2)">删除</el-button>
                </div>
                <el-divider></el-divider>
              </div>
            </el-collapse-item>
            <el-collapse-item title="图片分类" name="3">
              <div class="manager-box" v-for="item in imgType" :key="item.id">
                <div class="box1">
                  <h4>{{item.typeName}}</h4>
                  <el-button type="warning" @click="deleteGood(item, 3)">删除</el-button>
                </div>
                <el-divider></el-divider>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="切换账号">
          <div class="accout-tab">
            <el-button type="warning" @click="logout">切换账号</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="编辑个人资料" :visible.sync="userDialog" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="userData" :rules="rules" ref="userData">
        <el-form-item label="用户昵称" prop="nickName">
          <el-input size="small" v-model="userData.nickName" auto-complete="off" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="头像" prop="headImg">
          <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="handleChange" :auto-upload="false" :before-upload="beforeAvatarUpload">
            <img v-if="userData.headImg" :src="userData.headImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="账号" prop="account">
          <el-input size="small" v-model="userData.account" auto-complete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input size="small" v-model="userData.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button size="small" @click="closeDialog">取消</el-button> -->
        <el-button size="small" type="primary" class="title" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import {
  mapMutations,
  mapState
} from 'vuex'
import OrderList from '../order/orderList'
import Comment from '../comment'
import CartList from '../cart/cartList'
export default {
  name: 'User',
  data () {
    return {
      goodType: [],
      tzType: [],
      imgType: [],
      manager: '1',
      collectList: [], // 收藏列表
      userData: {
        id: '',
        account: '',
        password: '',
        nickName: '',
        // headImg: ''
      },
      userDialog: false,
      rules: {
        nickName: [{
          required: true,
          message: '请输入用户昵称',
          trigger: 'blur'
        }],
        account: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入用户密码',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.userData.account = this.user.account
    this.userData.password = this.user.password
    this.userData.nickName = this.user.nickName
    // this.userData.headImg = this.user.headImg
    this.getCollect()
    this.getVarity()
    this.getTzType()
    this.getImgType()
  },
  components: {
    OrderList,
    Comment,
    CartList
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['saveUser', 'clearAllState']),
    /**
     * 获取分类列表
     */
    getVarity (){
      let query = {
        pageNum: 1,
        pageSize: -1
      }
      this.$api.shop.getVarityList(query).then(res => {
        if (res.code === 200) {
          this.goodType = res.data.records
        }
      })
    },
    /**
     * 获取帖子分类列表
     */
    getTzType() {
      let query = {
        pageNum: 1,
        pageSize: -1
      }
      this.$api.daity.daityTypeList(query).then(res => {
        if (res.code === 200) {
          this.tzType = res.data.records
        }
      })
    },
    /**
     * 获取图片分类列表
     */
    getImgType() {
      let query = {
        pageNum: 1,
        pageSize: -1
      }
      this.$api.daity.photoTypeList(query).then(res => {
        if (res.code === 200) {
          this.imgType = res.data.records
        }
      })
    },
    /**
     * 删除分类
     */
    deleteGood (item, type) {
      let params = {
        id: item.id
      }
      if (type == 1) {
        this.$api.shop.deleteType(params).then(res => {
          if (res.code === 200) {
            this.$message.success('删除分类成功')
            let index = this.goodType.findIndex(item1 => item1.id == item.id)
            this.goodType.splice(index, 1)
          }
        })
      } else if (type == 2) {
        this.$api.daity.deleteDaityType(params).then(res => {
          if (res.code === 200) {
            this.$message.success('删除分类成功')
            let index = this.tzType.findIndex(item1 => item1.id == item.id)
            this.tzType.splice(index, 1)
          }
        })
      } else {
        this.$api.daity.deletePhotoType(params).then(res => {
          if (res.code === 200) {
            this.$message.success('删除分类成功')
            let index = this.imgType.findIndex(item1 => item1.id == item.id)
            this.imgType.splice(index, 1)
          }
        })
      }
    },
    /**
     * 获取收藏图片
     */
    getCollect () {
      let query = {
        userId: this.user.id,
        pageNum: 1,
        pageSize: -1
      }
      this.$api.daity.getCollect(query).then(res => {
        if (res.code === 200) {
          this.collectList = res.data.records
        }
      })
    },
    /**
     * 取消收藏
     */
    deleteCollect (id) {
      let query = {
        id: id,
      }
      this.$api.daity.deleteCollect(query).then(res => {
        if (res.code === 200) {
          this.getCollect()
        }
      })
    },
    logout () {
      this.clearAllState()
      sessionStorage.clear()
      this.$router.push("/login")
    },
    /**
     * 关闭编辑、增加弹出框
     */
    closeDialog() {
      this.userDialog = false
    },
    /**
     * 更新个人信息 dialog
     */
    discUser() {
      this.userDialog = true
    },
    /**
     * 更新个人信息
     */
    submitForm() {
      this.userData.id = this.user.id
      this.$api.auth.discUser(this.userData).then(res => {
        if (res.code === 200) {
          this.userDialog = false
          let data = Object.assign({}, this.user, this.userDialog)
          console.log(data);
          this.saveUser(data)
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.userData.headImg = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    /****
     * 上传图片 起步函数
     */
    handleChange(file) {
      this.submitUpload(file)
    },
    /***
     * 上传图片 上传函数
     */
    submitUpload(file) {
      let formData = new FormData() //  用FormData存放上传文件
      formData.append('file', file.raw, file.raw.name)
      this.$api.auth.uploadImage(formData).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
          this.userData.headImg = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userData {
  .user-box {
    width: 70%;
    margin: 20px auto;
    .accout-tab{
      width: 100%;
      height: 400px;
      position: relative;
      /deep/ .el-button{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: (-50%, -50%);
      }
    }
    .user-color {
      color: #ff6600;
      font-size: 18px;
      padding: 10px;  
      width: 70%;
      margin: 0 auto;
    }
    /deep/ .el-tabs__item{
        height: 75px;
      }
    .manager-box{
      .box1 {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
      }
    }
    .collect-box{
      width: 80%;
      margin: 0 auto;
      /deep/ .el-image{
          vertical-align: middle;
      }
      /deep/ .el-button{
        margin-left: 30px;
        vertical-align: middle;
      }
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
